<!DOCTYPE html>
<html lang="zh-Hans-CN">
    <head>
        <title>单例模式实例-右下角弹窗</title>
        <meta charset="utf-8" />
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <meta name="author" content="chen" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1" />
        <!--<link rel="stylesheet" type="css/text" media="screen and ( min-width: 1200px )" href="">-->
        <link rel="stylesheet" type="text/css" media="screen" href="" />
        <script defer="defer" src=""></script>
        <style>
            /*@import url("css/name.css") screen and ( min-width: 1200px );*/
        </style>
    </head>

    <body>
        <script>
            let Popup = (function() {
                let ins = null;
                class Pop {
                    constructor() {
                        if (ins) {	// 如果实例已经存在
                            return ins; // 返回当前实例
                        } // 如果实例不存在
                        ins = this; // 当前实例赋值给ins
                        // 创建一个元div素
                        this.ele = document.createElement("div");
                        // 设定div元素样式
                        this.ele.style.cssText =
                            "\
							position: fixed;\
							bottom: -300px;\
							right: 0;\
							z-index: 1;\
							width: 260px;\
							height: 110px;\
							padding: 20px;\
							background-color: #eee;\
							box-shadow: 0 0 2px #000;\
							transition: bottom 1s;\
							-moz-user-select: none;\
							user-select: none;\
						";

                        this.timer1, this.timer2 = null;

                        this.show = function(message) {
                            // 清除上一定时器
                            clearTimeout(this.timer1);
							clearTimeout(this.timer2);
                            // 设定元素内容
                            this.ele.innerText = message;
                            // 插入元素
                            document.body.appendChild(this.ele);
                            // 使用ele.offset使页面重新渲染, 以使transition生效
                            //this.ele.offsetTop;
                            // 0秒后执行弹窗
                            this.timer1 = setTimeout(() => {
                                this.ele.style.bottom = 0;
                            }, 0);
							// 2秒后弹窗消失
                            this.timer2 = setTimeout(() => {
                                document.body.removeChild(this.ele);
                                this.ele.style.bottom = "-300px";
                            }, 2000);
                        };
                    }
                }
                return Pop;
            })();
			// 创建一个实例
            new Popup().show("this is the message!!!");
			// 点击创建一个新的实例
            document.onclick = function() {
                new Popup().show("new message!!!");
            };
        </script>
    </body>
</html>
